<template>
  <div class="playlist-deatil">
    <div class="pic">
      <van-icon name="arrow-left" @click="goBack" />
      <van-image :src="picUrl" alt="" fit="cover"></van-image>
    </div>
    <div v-if="songUrl==''" class="play">
     <div>
        <van-icon name="play-circle-o" @click="selectSong(firstItem)" />
        <span>播放全部</span>
     </div>
    <div>
        <van-icon name="like-o" />
        <span>收藏歌单</span>
    </div>
    </div>
   
    <div v-else>
      <audio :src="songUrl" autoplay controls></audio>
    </div>
    <div class="song-list">
      <ul>
        <li v-for="item in songList" :key="item.songid" @click="selectSong(item)">
          <h4 class="song-list-title">{{ item.songname }}</h4>
          <span class="song-list-text">{{ item.singer[0].name }} - {{ item.albumname }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      songList: [],
      picUrl: "",
      songUrl:"",
      firstItem:""
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios
        .get("/api/songlist", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.songList = res.data.data.songlist;
          this.picUrl = res.data.data.logo;
          this.firstItem=this.songList[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    selectSong(item){
      axios.get("/jsososo/song/urls",{
        params:{
          id:item.songmid
        }
      })
      .then(res => {
        console.log(res.data.data[item.songmid])
        this.songUrl=res.data.data[item.songmid]
      })
      .catch(err => {
        console.error(err); 
      })
    }
  },
};
</script>

<style scoped>
    .pic{
        height: 275px;
    }
    .van-image{
        height: 275px;
        width: 100%;
    }
    .van-icon{
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 999;
        font-size: 40px;
    }
    .pic-item>p{
        font-size: 20px;
    }
    .song-list{
        margin-top: 0px;
        text-align: left;
        margin-left: 10px;
    }
    .song-list>ul>li{
        padding-top: 15px;
    }
    .song-list-title{
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: 400;/**取消字体加粗 */
        margin: 0px; padding: 0px;/**H标签取消间距 */
        overflow: hidden; /*文本超出隐藏*/
        text-overflow: ellipsis; /*文本超出显示省略号*/
        width: 200px;/**范围 */
        white-space: nowrap; /*超出的空白区域不换行*/ 

    }
    .song-list-text{
        font-size: 14px;
        color: grey;
        display: block;
        max-width: 100%;
        overflow: hidden; /*文本超出隐藏*/
        text-overflow: ellipsis; /*文本超出显示省略号*/
        width: 200px;/**范围 */
        white-space: nowrap; /*超出的空白区域不换行*/ 
    }
    .play{
        padding: 1rem;
        position: relative;
        overflow: hidden;
    }
    .play>div:nth-of-type(1){
        float:left;
    }
    .play>div:nth-of-type(2){
        float:right;
    }
    .play>div:nth-of-type(1)>span{
        height: 40px;
        display: inline-block;
        line-height: 40px;
        margin-left: 10px;
        margin-top: 5px;
    }
    .play>div:nth-of-type(2)>span{
        display:block;
        font-size: 12px;
        overflow: hidden;

    }
    .van-icon-like-o{
        font-size: 20px;
        position: relative;
    }
    .van-icon-play-circle-o{
        position: relative;
        color:#31c27c;
        float: left;
    }

</style>